<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>轨迹动画</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}

			ul li {
				list-style: none;
			}

			.btn-wrap {
				z-index: 999;
				position: fixed;
				top: 0;
				margin-left: 15px;
				padding: 10px;
				border-radius: 10px;
				background-color: transparent;
				box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
			}

			.btn {
				width: 55px;
				height: 30px;
				float: left;
				background-color: #fff;
				color: rgba(27, 142, 236, 1);
				font-size: 14px;
				border: 1px solid rgba(27, 142, 236, 1);
				border-radius: 5px;
				margin: 0 5px;
				text-align: center;
				line-height: 30px;
			}

			.btn:active {
				background-color: rgba(27, 142, 236, 0.8);
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id='container'></div>
		<ul class="btn-wrap" style="z-index: 99;">
			<li class="btn" id="start">开始</li>
			<li class="btn" id="cancel">停止</li>
		</ul>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

	<!-- 百度地图 -->

	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Af6FfpOOZrHT1Ff2enuUKMZgjz4NfQ3W"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js">
	</script>

	<script type="text/javascript">
		// 移动端实现hover效果
		document.body.addEventListener('touchstart', function() {});

		document.addEventListener('UniAppJSBridgeReady', function() {
			// 配置百度地图
			var map = new BMapGL.Map("container"); // 创建地图实例
			var point = new BMapGL.Point(108.970588, 34.224352); // 创建点坐标
			// 设置地图类型(1.标准地图：BMAP_NORMAL_MAP 2.地球模式：BMAP_EARTH_MAP 3.普通卫星地图：BMAP_SATELLITE_MAP)
			// map.setMapType(BMAP_EARTH_MAP);
			var opts = {
				offset: new BMapGL.Size(10, 40)
			}
			var scaleCtrl = new BMapGL.ScaleControl(opts); // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
			map.addControl(zoomCtrl);
			map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
			map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
			map.setHeading(0); // 设置地图旋转角度
			map.setTilt(50); // 设置地图的倾斜角度

			// 自定义一个折线轨迹
			var path = [{
				'lng': 108.970606,
				'lat': 34.221915
			}, {
				'lng': 108.970615,
				'lat': 34.222549
			}, {
				'lng': 108.970651,
				'lat': 34.223132
			}, {
				'lng': 108.970624,
				'lat': 34.223885
			}, {
				'lng': 108.970597,
				'lat': 34.224266
			}, {
				'lng': 108.970606,
				'lat': 34.224878
			}, {
				'lng': 108.970606,
				'lat': 34.225318
			}, {
				'lng': 108.970543,
				'lat': 34.225825
			}];
			var trackPoint = [];
			for (var i = 0; i < path.length; i++) {
				trackPoint.push(new BMapGL.Point(path[i].lng, path[i].lat));
			}
			var pl = new BMapGL.Polyline(trackPoint);
			// 创建个轨迹动画对象，并配置参数
			var trackAni = new BMapGLLib.TrackAnimation(map, pl, {
				overallView: true, // 动画完成后自动调整视野到总览
				tilt: 60, // 轨迹播放的角度，默认为55
				duration: 15000, // 动画持续时长，默认为10000，单位ms
				// delay: 3000 // 动画开始的延迟，默认0，单位ms
				delay: 0 // 动画开始的延迟，默认0，单位ms
			});
			// 启动动画
			// trackAni.start();
			// 强制停止动画
			// trackAni.cancel();
			document.getElementById('start').addEventListener('click', function(e) {
				trackAni.start();
			});
			document.getElementById('cancel').addEventListener('click', function(e) {
				trackAni.cancel();
				map.clearOverlays();
				map.centerAndZoom(point, 18);
				map.setHeading(0); // 设置地图旋转角度
				map.setTilt(50); // 设置地图的倾斜角度
			});
		});
	</script>
</html>
